html {
  height:100%;
}
body {
  margin:0px;
  width:100%;
  height:100%;
  background:linear-gradient(to bottom,Bisque,LightSlateGray) no-repeat left top;
  background-attachment:fixed;
}
@keyframes gradient-shift {
  0% {
    background-position:0% 50%;
  }
  50% {
    background-position:100% 50%;
  }
  75% {
    background-position:50% 100%;
  }
  100% {
    background-position:0% 50%;
  }
}
a {
  position:relative;
  display:block;
  width:100%;
  text-decoration:none;
  font-size:5em;
}
a i {
  position:relative;
  left:35%;
  background:linear-gradient(45deg,#f9d423,#ff4e50,#7b4397,#00c6ff);
  background-size:300% 300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradient-shift 8s ease infinite;
  transition:left 1s;
}
a i:after {
  display:none;
  -webkit-text-fill-color:blue;
  content:"官方留言»";
  text-decoration:underline;
  opacity:0;
  top:0;
  right:-100px;
  transition:right 0.5s,opacity 0.5s;
}
a:hover i {
  left:20%;
}
a:hover i:after {
  display:inline;
  opacity:1;
  right:0;
}
#b-r {
  position:relative;
  color:red;
  background-color:GoldenRod;
  top:60%;
  left:40%;
  font-size:1.5em;
  width:10%;
  height:10%;
  border:3px outset white;
  border-radius:15%;
  padding:0px;
  box-shadow: 0 15px #999;
}
#b-r:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}